import React from 'react';
import { WeaAlertPage, WeaInputLocale, WeaLocaleProvider, WeaHelpfulTip } from 'ecCom';
import { Spin, Button, Affix, Pagination } from 'antd'
import { inject, observer } from 'mobx-react';
import DefaultTemplet from '../apiShowTemp/DefaultTemplet';
import * as Apis from '../../../apis/Api'
const getCurrentLabel = WeaInputLocale.getCurrentLabel;
const getLabel = WeaLocaleProvider.getLabel;
import { observable, action } from 'mobx';
// @inject("apiGroupShowSingleStore")
@observer
export default class ApiGroupShowSingle extends React.Component {
    //通过id和指定参数获取内容
    constructor(props) {
        super(props);
        this.state = {
            visible: true
        }
    }
    @observable apiId = "";//接口id
    @observable baseList;//基本信息
    @observable tableList;//列表
    @observable showTemplet;//显示模板
    @observable isSuccess = false;//是否成功数据
    @observable urlQuery;//拼接完后的参数
    @observable groups = [];//菜单分组
    @observable parsms = [];//改接口设置的参数
    @observable singRequestParam = {};//单接口页面接收到的参数
    @observable subTableList = [];//子列表
    @observable apiName = "";//接口名称
    @observable front_path = "";//前端路径
    @observable apiParamsList = [];//真正属于该接口的参数及参数值
    @observable updata_date = "";//数据更新时间
    @observable msgcode = "";//返回信息
    @observable loading = true;//加载状态
    @observable isList = "0";//接口内的数据为纯列表
    @observable thisPage = 1;//纯列表类接口默认显示第一页，启信宝显示前二十条
    @observable total = 1;//纯列表类接口一共有多少页
    @observable module = "";
    @observable info = [];
    @observable totalNumber = 0;
    @observable current = "1-20";
    componentWillMount() {
        this.initData(this.props);
    }
    render() {
        return (
            <div className="group_show_single">
                {/* <Spin spinning={this.loading} size="large" tip={getLabel(384470, "正在读取数据...")}> */}
                <div>
                    <div id={this.apiId} className="section-big-title">
                        <strong>{this.apiName}</strong>
                    </div>
                    <div className="group_show_single_time">{this.isSuccess && "(更新时间：" + this.updata_date + ")"}
                    </div>
                </div>
                {this.getContainer()}
                {/* </Spin> */}
            </div>
        )
    }
    // getPageButton() {
    //     let buttons = [];
    //     if (this.thisPage > 1) {
    //         buttons.push(<Button type="primary" onClick={() => this.cutPage()} >{getLabel('', "前20条")}</Button>);
    //     } else if (this.thisPage == 1) {
    //         buttons.push(<Button type="primary" disabled>{getLabel('', "前20条")}</Button>);
    //     }
    //     buttons.push(<Button disabled>{getLabel(506132, "当前为第")}{this.current}{getLabel('', '条，共')}{this.totalNumber}{getLabel('', '条')}</Button>);
    //     if (this.total > 1) {
    //         buttons.push(<Button type="primary" onClick={() => this.countPage()}>{getLabel('', "后20条")}</Button>);
    //     } else if (this.total == 1) {
    //         buttons.push(<Button type="primary" disabled>{getLabel('', "后二十条")}</Button>);
    //     }
    //     buttons.push(
    //         <br />
    //     )
    //     buttons.push(
    //         getLabel('', "分页列表接口每次只能调用20条数据,其他数据需要翻页请求，每翻一页需要请求一次接口")
    //     )
    //     return buttons;
    // }
    getContainer() {
        if (this.isSuccess && !this.loading) {
            if (this.showTemplet == "0") {
                return <div class="api_container">
                    <DefaultTemplet baseList={this.baseList} tableList={this.tableList} subList={this.subTableList} isList={this.isList} />
                    {this.isList == "1" && this.total > 1 && <div style={{ float: "right", margin: "16px 0" }}>
                        <Pagination
                            defaultCurrent={1}
                            total={this.totalNumber}
                            pageSize={20}
                            showTotal={total => `共 ${total} 条`}
                            onChange={this.onChangePage}
                            current={this.thisPage}
                            itemRender={this.itemRender}
                            showQuickJumper
                        />
                        {/* {getLabel('', "分页列表接口每次只能调用20条数据,其他数据需要翻页请求，每翻一页需要请求一次接口")} */}
                    </div>
                    }
                </div >;
            } else if (showTemplet == "1") {
                return "模板一"
            }
        } else if (!this.isSuccess && !this.loading) {
            return <div className="group_show_alert">
                {/* <WeaAlertPage> */}
                <div >
                    {this.msgcode}
                </div>
                {/* </WeaAlertPage> */}
                {this.isList == "1" && this.total > 1 && <div style={{ float: "right", margin: "16px 0" }}>
                    <Pagination
                        defaultCurrent={1}
                        total={this.totalNumber}
                        pageSize={20}
                        onChange={this.onChangePage}
                        current={this.thisPage}
                        itemRender={this.itemRender}
                        showQuickJumper
                    />
                </div>}
            </div>
        } else {
            return "";
        }

    }
    itemRender(current, type, originalElement) {
        if (type === 'prev') {
            return <a>请求前20条</a>;
        }
        if (type === 'next') {
            return <a>请求后20条</a>;
        }
        return originalElement;
    }
    //刷新数量

    @action
    initData = (props) => {
        if (props.location) {//通过链接
            this.front_path = "/" + props.params.frontPath;
            this.singRequestParam = props.location.query;
        } else {//通过组件
            this.singRequestParam = props.requestParam;
            this.front_path = "/" + props.frontPath;
        }
        if (this.front_path != "/undefined") {
            this.getIdByFrontPath(this.front_path);
        }
    }

    @action
    getIdByFrontPath = (frontPath) => {
        Apis.getIdByFrontPath({ frontPath: frontPath }).then(data => {
            this.isList = data.islist;
            if (data.status == "success") {
                this.apiId = data.apiId;
                //拼接参数
                let urlQuery = "&";
                let urlQueryBeforeEncode = "";
                this.parsms = data.params;
                this.parsms.map(param => {
                    let value = this.singRequestParam[param.front_name];
                    if (value) {
                        urlQueryBeforeEncode += param.server_name + "=" + value + "&";
                        this.apiParamsList.push({ ...param, value: value });
                        if ((/.*[\u4e00-\u9fa5]+.*$/.test(value))) {
                            value = encodeURI(value);
                        }
                        urlQuery += param.server_name + "=" + value + "&";
                    }
                });

                if (this.isList == "1") {
                    urlQuery += "skip=" + (this.thisPage - 1) * 20;
                    urlQueryBeforeEncode += "skip=" + (this.thisPage - 1) * 20;
                }
                this.apiName = data.apiName;
                this.front_path = data.front_path;
                this.showTemplet = data.showTemplet;
                this.callApi(this.apiId, urlQuery, urlQueryBeforeEncode, this.isList);
            } else {
                this.msgcode = data.msgcode;
                this.isSuccess = false;
                this.loading = false;
            }
        })
    }

    //调用API
    @action
    callApi = (id, urlQuery, urlQueryBeforeEncode, isList) => {
        const { reFresh } = this.props.store;
        Apis.getApi({ apiId: id, query: urlQuery, urlQueryBeforeEncode: urlQueryBeforeEncode, isList: isList }).then(data => {
            if (data.status == "success") {
                if (data.datas.baseList) {
                    this.baseList = data.datas.baseList;
                }
                this.tableList = data.datas.tableList;
                this.subTableList = data.datas.sublist;
                this.updata_date = data.updata_date + " " + data.updata_time;
                this.totalNumber = parseInt(data.datas.total);
                this.total = Math.ceil(parseInt(data.datas.total) / 20);
                if (this.isList == "1") {//分页列表
                    reFresh(id, data.datas.total);
                } else if (this.isList == "2") {//不分页列表
                    reFresh(id, data.datas.tableList[0].listSize);
                }
                this.isSuccess = true;
            } else {
                this.msgcode = data.msgcode;
                this.isSuccess = false;
                if (this.isList == "1" || this.isList == "2") {
                    reFresh(id, 0);
                }
            }
            this.loading = false;
        })
    }
    //翻页
    onChangePage = (page) => {
        this.clrarCatch();
        this.thisPage = page;
        this.getIdByFrontPath(this.front_path);
    }
    //页码+1
    // @action
    // countPage = () => {
    //     if (this.total > this.thisPage) {
    //         this.clrarCatch();
    //         this.thisPage++;
    //         let page = this.thisPage;
    //         this.current = (20 * page - 20 + 1) + "-" + (20 * page);
    //         this.getIdByFrontPath(this.front_path);
    //     }
    // }

    // //页码-1
    // @action
    // cutPage = () => {
    //     if (this.thisPage > 1) {
    //         this.clrarCatch();
    //         this.thisPage--;
    //         let page = this.thisPage;
    //         this.current = (20 * page - 20 + 1) + "-" + (20 * page);
    //         console.log(this.current)
    //         this.getIdByFrontPath(this.front_path);
    //     }
    // }

    //清除缓存
    @action
    clrarCatch = () => {
        this.apiParamsList = [];
        this.msgcode = "";
        this.isList = "0";
        this.updata_date = "";
        this.isSuccess = false;
        this.loading = true;
    }

}